<template>
  <div class="video">
    <div class="title-wrapper">
      <span class='tag'>MV</span>
      <span class='title'>{{mvName}}</span>
      <span class='artist'>{{mvArtist}}</span>
    </div>
    <video :src="mvUrl" controls></video>
  </div>
</template>

<script>
export default {
  data(){
    return {
      // mv名称
      mvName:'',
      // mv地址
      mvUrl:'',
      // mv作者
      mvArtist:'',
    };
  },
  async created(){
    if(!this.$router.history.current.params.mvid){
      alert("未传入歌曲mvid信息，请检查操作！")
      window.history.back(-1)
      return
    }
    // 先显示mvid
    // console.log("----------------------------------")
    // console.log(this.$router.history.current.params.mvid)
    // 获取mv相关信息
    await this.$axios.get('/mv/detail?mvid='+this.$router.history.current.params.mvid)
    .then(backdata =>{
    // console.log("----------------------------------")
    //     console.log(backdata)
        // 赋值
        this.mvName = backdata.data.name
        this.mvArtist = backdata.data.artistName
    })
    .catch((err)=>{
          if(err){
            // 错误之后读取本地信息

          }
      })

    // 获取mv视频
    await this.$axios.get('/mv/url?id='+this.$router.history.current.params.mvid)
    .then(backdata =>{
    console.log("----------------------------------")
        console.log(backdata)
        // 赋值
        this.mvUrl = backdata.data.url

    })
    .catch((err)=>{
          if(err){
            // 错误之后读取本地信息

          }
      })

  }


}
</script>

<style scoped>
    @import "@/assets/css/video.css"
</style>